<template>
  <div class="home w">
    <!-- 轮播图 -->
    <!-- <HomeBanner/> -->

    <!-- 新鲜好物 -->
    <!-- <HomeNew /> -->
    <!-- 人气推荐 -->
    <!-- <HomeHot /> -->
    <!-- 产品区块 -->
    <!-- <HomeProduct /> -->
    
    <!-- 推荐商品 -->
    <HomeGoods />
    
    <!-- 居家分类商品 -->
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="居家" />
    
    <!-- 其他分类商品 -->
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="car" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="美食" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="服饰" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="运动" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="个护" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="严选" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="数码" />
    <HomeCategoryGoods :fetch-products="fetchProductsByCategory" category="杂货" />
  </div>
</template>

<script>
import HomeBanner from './HomeBanner.vue'
import HomeNew from './HomeNew.vue'
import HomeHot from './HomeHot.vue'
import HomeProduct from './HomeProduct.vue'
import HomeGoods from './HomeGoods.vue'
import HomeCategoryGoods from './HomeCategoryGoods.vue'
import { getProductsByCategory } from '@/api'
export default {
    components:{
        HomeBanner,
        HomeNew,
        HomeHot,
        HomeProduct,
        HomeGoods,
        HomeCategoryGoods
    },
    methods: {
        fetchProductsByCategory(category) {
            return getProductsByCategory(category);
        }
    }
};
</script>

<style lang="less" scoped>
</style>